<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
	<meta name="robots" content="all" />
	<meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
	<meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">
	<title th:text="${SITE_CONFIG.SITE_NAME}"></title>
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/font-awesome/css/font-awesome.min.css|}">
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/layui/css/layui.css|}" />
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/css/master.css|}" />
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/css/gloable.css|}" />
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/css/nprogress.css|}" />
    <link rel="stylesheet" th:href="@{|/${WEB_THEME}/source/css/blog.css|}" />
</head>
<body>
<!--<div th:replace="@{|/${WEB_THEME}/module/navbar.html|}"></div>-->
<div class="header">
</div>
<div th:replace="@{|/${WEB_THEME}/module/navbar.html|}"></div>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
		    <div class="col-content">
		        <div class="inner">
		            <article class="article-list bloglist" id="LAY_bloglist" >
						<section class="article-item zoomIn article" th:each="item,temp : ${articleList}">
							<div class="fc-flag" th:if="${item.top==1}">置顶</div>
							<h5 class="title">       
								<span class="fc-blue">【原创】</span>       
								<a th:href="@{${'/blog/article/'+item.id}}" th:text="${item.title}"></a>
							</h5>   
							<div class="time">       
								<span class="day" th:text="${#dates.format(item.createTime,'dd')}"></span>
								<span class="month fs-18">[[${#dates.format(item.createTime,'MM')}]]<span class="fs-14">月</span></span>
								<span class="year fs-18 ml10" th:text="${#dates.format(item.createTime,'yyyy')}"></span>
							</div>   
							<div class="content">       
								<a th:href="@{${'/blog/article/'+item.id}}" class="cover img-light">
									<img th:src="@{|/${WEB_THEME}/source/image/java.jpg|}">
								</a>
								<p  th:text="${item.description}" class="blogtext"></p>
							</div>   
							<div class="read-more">       
								<a th:href="@{${'/blog/article/'+item.id}}" class="fc-black f-fwb">阅读更多</a>
							</div>    
							<aside class="f-oh footer">       
								<div class="f-fl tags" th:each="tag,temp : ${item.tags}">
									<span class="fa fa-tags fs-16"></span>           
									<a class="tag" th:text="${tag.name}"></a>
								</div>       
								<div class="f-fr">           
									<span class="read">               
										<i class="fa fa-eye fs-16"></i>               
										<i class="num" th:text="${item.lookCount}? ${item.lookCount} : 0"></i>
									</span>           
									<span class="ml20">               
										<i class="fa fa-comments fs-16"></i>               
										<a href="javascript:void(0)" class="num fc-grey" th:text="${item.commentCount}? ${item.commentCount} : 0"></a>
									</span>       
								</div>   
							</aside>
						</section>
		            </article>
		        </div>
		    </div>
		    <div class="col-other">
		        <div class="inner">
					<div class="other-item" id="categoryandsearch">
			    		<div class="search">
							<form action="/search" id="searchForm">
					        <label class="search-wrap">
					            <input type="text"  id="search" name="keywords" th:value="@{${keywords}}"  placeholder="输入关键字搜索" />
								<a href="#" onclick="searchBlog()">
					            <span class="search-icon">
					                <i class="fa fa-search"></i>
					            </span>
								</a>
					        </label>
			        		<ul class="search-result"></ul>
							</form>
			    		</div>
			    		<ul class="category mt20" id="category">
				        	<li data-index="0" class="slider"></li>
				        	<li data-index="1"><a href="/blog">全部文章</a></li>
							<li  th:class="${category.id==categoryId?'active':''}"  th:data-index="${iterStat.index+2}" th:each="category,iterStat:${CATEGORY_LIST}">	<a th:href="@{${'/blog/category/' + category.id}}" th:text="${category.name}" ></a></li>
			    		</ul>
					</div>
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
					<div class="article-category">
					    <div class="article-category-title">分类导航</div>
						<a th:each="category,iterStat:${CATEGORY_LIST}" th:href="@{${'/blog/category/' + category.id}}" th:text="${category.name}"></a>
					    <div class="f-cb"></div>
					</div>
					<!--遮罩-->
					<div class="blog-mask animated layui-hide"></div>
					<div class="other-item">
					    <h5 class="other-item-title">热门文章</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
								<li th:each="item,temp:${HOT_LIST}">
									<a th:text="${item.title}" th:href="${'/blog/article/'+item.id}"></a>
								</li>
					        </ul>
					    </div>
					</div>
					<div class="other-item">
					    <h5 class="other-item-title">推荐文章</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
								<li th:each="item,temp:${RECOMMENDED_LIST}">
									<a th:text="${item.title}" th:href="${'/blog/article/'+item.id}"></a>
								</li>
					        </ul>
					    </div>
					</div>
					<div class="other-item">
					    <h5 class="other-item-title">最近访客</h5>
					    <div class="inner">
					        <dl class="vistor">
					                <dd><a href="javasript:;"><img th:src="@{|/${WEB_THEME}/source/image/a1.png|}"><cite>Anonymous</cite></a></dd>
					        </dl>
					    </div>
					</div>
		        </div>
		    </div>
		</div>
    </div>
<div th:replace="@{|/${WEB_THEME}/module/footer.html|}"></div>
    <script th:src="@{|/${WEB_THEME}/source/layui/layui.js|}"></script>
    <script th:src="@{|/${WEB_THEME}/source/js/yss/gloable.js|}"></script>
    <script th:src="@{|/${WEB_THEME}/source/js/plugins/nprogress.js|}"></script>
    <script>NProgress.start();</script>
 	<script th:src="@{|/${WEB_THEME}/source/js/yss/article.js|}"></script>
    <script> 
        window.onload = function () {
            NProgress.done();
        };
		function searchBlog() {
			var  keywords=document.getElementById('search').value;
			window.location.href='/search/'+keywords;
		}
    </script>
</body>
</html>
